<template>
  <div class="app-container">
    <el-row style="margin-bottom: 10px">
      <el-button @click="push">push</el-button>
      <el-button type="primary" plain @click="pop">pop</el-button>
      <el-button type="success" plain @click="peek">peek</el-button>
      <el-button type="info" plain @click="isEmpty">isEmpty</el-button>
      <el-button type="warning" plain @click="size">size</el-button>
      <el-button type="danger" plain @click="clear">clear</el-button>
    </el-row>

    <div class="box-container">
      <el-card v-for="(value, key, index) in items" :key="index" class="box-card">
        {{ value }}
      </el-card>
    </div>
  </div>
</template>

<script>

export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      count: 0,
      items: {}
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    push() {
      this.$prompt('请输入内容', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(({ value }) => {
          this.$set(this.items, `${this.count}`, value)
          this.count++
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          })
        })
    },
    pop() {
      if (!this.count) {
        return undefined
      }
      this.count--
      const result = this.items[this.count]
      this.$delete(this.items, `${this.count}`)
      this.$message(`${result}`)
    },
    isEmpty() {
      const message = this.count === 0
      this.$message(`${message}`)
      return message
    },
    size() {
      const message = this.count
      this.$message(`${message}`)
      return this.count
    },
    peek() {
      if (!this.count) {
        return undefined
      }
      const result = this.items[this.count - 1]
      this.$message(`${result}`)
    },
    clear() {
      this.items = {}
      this.count = 0
    }
  }
}
</script>

<style lang="scss" scoped>
.box-container {
  display: flex;
  flex-wrap: wrap;
  .box-card {
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    margin-right: 10px;
  }
}
</style>
